{% extends "admin/base_site.html" %}

{% block extcss %}
<style type="text/css">

/* ============= 路牌1样式 ============ */
input.road_h1 { /* 水平方向路名A,B,C */
    width: 60px; height: 22px;
    background-color: #D3E9FF;
    border-radius: 4px; /* 圆角 */
    border: 1px solid #cccccc;
}
input.road_h2 { /* 水平方向路名D,E,F */
    margin-left: 10px; width: 60px; height: 22px;
    background-color: #D3E9FF;
    border-radius: 4px;
    border: 1px solid #cccccc;
}
input.road_v1 { /* 垂直方向路名G */
    margin-left: 55px; width: 60px; height: 22px;
    background-color: #D3E9FF;
    border-radius: 4px;
    border: 1px solid #cccccc;
}
input.road_v2 { /* 垂直方向路名H */
    margin-left: 55px; margin-bottom: 10px; width: 60px; height: 22px;
    background-color: #D3E9FF;
    border-radius: 4px;
    border: 1px solid #cccccc;
}

/* ============= 路牌2和3样式 ============ */
input.road_h1_2 { /* 水平方向路名A,B,C */
    margin-left: 20px; width: 60px; height: 22px;
    background-color: #D3E9FF;
    border-radius: 4px; /* 圆角 */
    border: 1px solid #cccccc;
}
input.road_v1_2 { /* 垂直方向路名G */
    margin-left: 98px; width: 60px; height: 22px;
    background-color: #D3E9FF;
    border-radius: 4px;
    border: 1px solid #cccccc;
}
input.road_v2_2 { /* 垂直方向路名H */
    margin-left: 98px; margin-bottom: 10px; width: 60px; height: 22px;
    background-color: #D3E9FF;
    border-radius: 4px;
    border: 1px solid #cccccc;
}

</style>
{% endblock %}

{% block extjs %}
<script type="text/javascript">

function checkMark(m) {
    //var rm = m.toUpperCase();
    if($("#mark_"+m).attr("checked") == "checked") { //已选中时再点击
        $("#"+m+"_pressed").css("background-color","#D3E9FF");
        $("#"+m+"_pressed").val(m.substring(0, 1).toUpperCase());
        $("#mark_"+m).attr("checked", false);
        $("#"+m+"_as_target").attr("checked", false);  //
    } else {  //未选中时点击
        $("#"+m+"_pressed").css("background-color","#1F90F2");
        $("#mark_"+m).attr("checked", 'checked');
        $("#"+m+"_as_target").attr("checked", 'checked');
    }
}

function saveMultiParams() {
    var demo_scheme = $('#demo_scheme').val();
    var step_scheme = $('#step_scheme').val();
    var move_type =   $("input[name='move_type']:checked").val();
    var wp_scheme =   $('#wp_scheme').val(); //注视点运动模式
    var velocity =    $('#velocity').val();
    
    var board_scale = $('#board_scale').val(); //缩放比例
    var board_range = $('#board_range').val(); //排列形式: 横/纵  
    var board_space = $('#board_space').val(); //路牌间距
    var pre_board_num = $('#pre_board_num').val(); //初始路牌显示数
    
    var eccent =     $('#eccent').val();
    var init_angle = $('#init_angle').val();
    var board_size = $('#board_size').val();
    var road_size =  $('#road_size').val();
    
    var space_scale_type = $('#space_scale_type').val();  //关键间距过程, 同时缩放或逐一缩放
    var desc = $('#desc').val();
    
    //构造 road_marks参数
    var marks1 = ['a1', 'b1', 'c1', 'd1', 'e1', 'f1', 'g1', 'h1'];  //辅助数组
    var marks2 = ['a2', 'b2', 'c2', 'd2', 'e2', 'f2', 'g2', 'h2'];  
    var marks3 = ['a3', 'b3', 'c3', 'd3', 'e3', 'f3', 'g3', 'h3'];  
    
    var marksArray = new Array();
    marksArray.push(marks1);
    marksArray.push(marks2);
    marksArray.push(marks3);
    
    var res_road_marks = [];
    for(k in marksArray) {
        var road_marks = [];
        var target_seats = [];
        
        var marks = marksArray[k];
        for(i in marks) {
            if($("#mark_"+marks[i]).attr("checked") == "checked") {
                road_marks.push((marks[i].substring(0, 1)).toUpperCase()); //remove digit    
            }
            if($("#"+marks[i]+"_as_target").attr("checked") == "checked") {
                target_seats.push((marks[i].substring(0, 1)).toUpperCase());
            }
        }
        
        if( road_marks.length < 2 || target_seats.length < 1 ) {
            $("#set_result").css('color', 'red');
            $("#set_result").html('');
            $("#set_result").append('路牌-'+(++k)+": " + '路名数量小于2, 或目标项数量小于1');
            return;   
        }
        
        res_road_marks.push(road_marks.join(",") + "|" + target_seats.join(","));
    }
    
    console.log('res_road_marks: '+res_road_marks);
    
    if(isNull(eccent)) {
        $("#set_result").css('color', 'red');
        $("#set_result").html('');
        $("#set_result").append('请设置路牌中心距');
        return;
    }        
    
    if(isNull(init_angle)) {
        $("#set_result").css('color', 'red');
        $("#set_result").html('');
        $("#set_result").append('请设置初始角度');
        return;
    }    
    
    $.ajax({
        url:        '/admin/vision/set_multi_params',
        type:       "POST",
        dataType:   "json",
        data:      {"board_type":   'M', 
                    "demo_scheme":  demo_scheme, 
                    "step_scheme":  step_scheme,
                    "move_type":    move_type,
                    "wp_scheme":    wp_scheme,
                    "velocity":     velocity,
                    "board_scale":  board_scale,    
                    "board_range":  board_range,    
                    "board_space":  board_space,
                    "board_size":   board_size,
                    "pre_board_num":pre_board_num,
                    "road_size":    road_size,  
                    "road_marks":   res_road_marks.join("::"),              
                    "eccent":       eccent,
                    "init_angle":   init_angle,
                    "desc":         desc
    }, 
                    
        success: function(res){
            console.log(res);
            setResult(res);
        },
        error:  function(e){
            alert("提交异常");
        },
        beforeSend: function(xhr) {
                xhr.setRequestHeader("X-CSRFTOKEN", $.cookie('csrftoken'));
        },
    });
}

function setResult(res) {
    if(res.code == 1) {
        $("#set_result").css('color', '#009900');
        $("#set_result").html('');
        window.location.href="/admin/vision/trialparam/";  //跳转到列表页面  
    } else {
        $("#set_result").css('color', 'red');
        $("#set_result").html('');
        $("#set_result").append(res.msg);
    }
    
}
</script>
{% endblock %}

<!-- CONTENT -->
{% block content %}
<div><p><label style="font-size: 25px">多路牌参数</label></p></div>

<div class="tab-content tab-content-main">
    
<form id="params_form" method="post" action="##" class="form-horizontal">    
{% csrf_token %}        

<!--实验模式-->
<div class="control-group form-row"><div>
    <div class="control-label">
        <label class="required">实验模式:</label></div>
    <div class="controls">
        <select id="demo_scheme" name="demo_scheme">
            <option value="S" selected="selected">静态</option>
            <option value="D">动态</option>
        </select>&nbsp;&nbsp;
        
        <div id="move_type" style="display: none;">
            <input name="move_type" type="radio" checked="checked" value="C" />圆周 &nbsp;&nbsp;<!--Circle圆周-->
            <input name="move_type" type="radio" value="S" />平滑 &nbsp;&nbsp;<!--smooth平滑-->
            <input name="move_type" type="radio" value="M" />混合 &nbsp;&nbsp;<!--Mixed混合-->
            <!--<input name="move_type" type="radio" value="O" />MOT &nbsp;&nbsp; --><!--MOT-->
        </div>
    </div>
</div></div>

<!--注视点是否运动-->
<div id="wp_scheme_div" class="control-group form-row" style="display: none;"><div>
    <div class="control-label">
        <label class="required">注视点模式:</label></div>
    <div class="controls">
        <select id="wp_scheme" name="wp_scheme">
            <option value="S" selected="selected">静止不动</option>
            <option value="L">直线运动</option>
        </select>
        <span class="prompt-text">(若注视点运动则为MOT模式. 该选项与运动模式组合使用)</span>
    </div>
</div></div>

<!--速度值-->
<div id="velocity_div" class="control-group form-row" style="display: none;"><div>
    <div class="control-label"><label>速度值:</label></div>
    <div class="controls">
        <input name="velocity" class="vTextField" id="velocity" type="text" value="" placeholder="v1,v2,v3" >
        <span class="prompt-text">(动态模式时需设置该值3个, 各值间以 , 分隔)</span>
    </div>
</div></div> 

<!--阶梯过程-->
<div class="control-group form-row"><div>
    <div class="control-label">
        <label class="required">阶梯过程:</label></div>
    <div class="controls">
        <select id="step_scheme" name="step_scheme">
            <option value="R" selected="selected">关键间距</option>
            <option value="S">尺寸阈值</option>
            <option value="N">数量阈值</option>
            <option value="V">动态敏感度</option>
        </select>
    </div>
</div></div>

<!--关键间距缩放类型-->
<div class="control-group form-row"><div>
    <div class="control-label"><label>关键间距类型:</label></div>
    <div class="controls">
        <select id="space_scale_type" name="space_scale_type">
            <option value="R1" selected="selected">(间距1)同时缩放</option>
            <option value="R2">(间距2)逐一缩放</option>        
        </select>
        <span class="prompt-text">(关键间距阶梯过程时该参数有效, 默认"同时缩放")</span>
    </div>
</div></div>

<!--路牌尺寸-->
<div class="control-group form-row"><div>
    <div class="control-label"><label>路牌尺寸:</label></div>
    <div class="controls">
        <select id="board_size" name="board_size">
            <option value="140,100" selected="selected">140*100</option>
            <option value="280,200">280*200</option>
       </select><span class="prompt-text"> (所设为最大路牌尺寸, 其他路牌按比例依次缩放)</span>            
    </div>
</div></div> 

<!--路名尺寸-->
<div class="control-group form-row"><div>
    <div class="control-label"><label>路名尺寸:</label></div>
    <div class="controls">
        <select id="road_size" name="road_size">
            <option value="11" selected="selected">11</option>
            <option value="15">15</option>
        </select>
    </div>
</div></div>

<!--路牌尺寸比例-->
<div class="control-group form-row"><div>
    <div class="control-label"><label>路牌尺寸比例:</label></div>
    <div class="controls">
        <select id="board_scale" name="board_scale">
            <option value="1" selected="selected">1</option>
            <option value="0.7">0.7</option>
       </select>            
    </div>
</div></div> 

<!--路牌排列形式-->
<div class="control-group form-row"><div>
    <div class="control-label"><label>路牌排列:</label></div>
    <div class="controls">
        <select id="board_range" name="board_range">
            <option value="H" selected="selected">横列</option>
            <option value="V">纵列</option>
        </select>
    </div>
</div></div>     

<!--路牌间距-->
<div class="control-group form-row"><div>
    <div class="control-label"><label>路牌初始间距:</label></div>
    <div class="controls">
        <input name="board_space" class="vTextField" id="board_space" type="text" value="160">
    </div>
</div></div>   
  
<!--路名数量-->
<!-- <div class="control-group form-row"><div>
    <div class="control-label"><label>路名数量:</label></div>
    <div class="controls">
        <select style="width: 70px;" id="road_num1" name="road_num1">
            <option value="2" selected="selected">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
        </select>
        <select style="width: 70px;" id="road_num2" name="road_num2">
            <option value="2" selected="selected">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
        </select>
        <select style="width: 70px;" id="road_num3" name="road_num3">
            <option value="2" selected="selected">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
        </select>
        <span class="prompt-text">(分别设置3个路牌上的路名数量)</span>
    </div>
</div></div>   -->
    
<!--路名位置设置-->    
<div class="control-group form-row"><div>
    <div class="control-label"><label>路名位置:<br />(勾选后作为目标项)</label></div>
    <div class="controls">
        <input id="g1_pressed" onclick="checkMark('g1');" type="button" value="G" class="road_v1" /><!--G1-->
        <input id="g1_as_target" name="g1_as_target" type="checkbox">
        <input id="g2_pressed" onclick="checkMark('g2');" type="button" value="G" class="road_v1_2" /><!--G2-->
        <input id="g2_as_target" name="g2_as_target" type="checkbox">
        <input id="g3_pressed" onclick="checkMark('g3');" type="button" value="G" class="road_v1_2" /><!--G3-->
        <input id="g3_as_target" name="g3_as_target" type="checkbox"><br />
        
        <input id="h1_pressed" onclick="checkMark('h1');" type="button" value="H" class="road_v2" /><!--H1-->
        <input id="h1_as_target" name="h1_as_target" type="checkbox">
        <input id="h2_pressed" onclick="checkMark('h2');" type="button" value="H" class="road_v2_2" /><!--H2-->
        <input id="h2_as_target" name="h2_as_target" type="checkbox">
        <input id="h3_pressed" onclick="checkMark('h3');" type="button" value="H" class="road_v2_2" /><!--H3-->
        <input id="h3_as_target" name="h3_as_target" type="checkbox"><br />
        
        <input id="a1_pressed" onclick="checkMark('a1');" type="button" value="A" class="road_h1" /><!--A1-->
        <input id="a1_as_target" name="a1_as_target" type="checkbox">
        <input id="d1_pressed" onclick="checkMark('d1');" type="button" value="D" class="road_h2" /><!--D1-->
        <input id="d1_as_target" name="d1_as_target" type="checkbox">
        <input id="a2_pressed" onclick="checkMark('a2');" type="button" value="A" class="road_h1_2" /><!--A2-->
        <input id="a2_as_target" name="a2_as_target" type="checkbox">
        <input id="d2_pressed" onclick="checkMark('d2');" type="button" value="D" class="road_h2" /><!--D2-->
        <input id="d2_as_target" name="d2_as_target" type="checkbox">
        <input id="a3_pressed" onclick="checkMark('a3');" type="button" value="A" class="road_h1_2" /><!--A3-->
        <input id="a3_as_target" name="a3_as_target" type="checkbox">
        <input id="d3_pressed" onclick="checkMark('d3');" type="button" value="D" class="road_h2" /><!--D3-->
        <input id="d3_as_target" name="d3_as_target" type="checkbox"><br />
        
        <input id="b1_pressed" onclick="checkMark('b1');" type="button" value="B" class="road_h1" /><!--B1-->
        <input id="b1_as_target" name="b1_as_target" type="checkbox" />
        <input id="e1_pressed" onclick="checkMark('e1');" type="button" value="E" class="road_h2" /><!--E1-->
        <input id="e1_as_target" name="e1_as_target" type="checkbox">
        <input id="b2_pressed" onclick="checkMark('b2');" type="button" value="B" class="road_h1_2" /><!--B2-->
        <input id="b2_as_target" name="b2_as_target" type="checkbox" />
        <input id="e2_pressed" onclick="checkMark('e2');" type="button" value="E" class="road_h2" /><!--E2-->
        <input id="e2_as_target" name="e2_as_target" type="checkbox">
        <input id="b3_pressed" onclick="checkMark('b3');" type="button" value="B" class="road_h1_2" /><!--B3-->
        <input id="b3_as_target" name="b3_as_target" type="checkbox" />
        <input id="e3_pressed" onclick="checkMark('e3');" type="button" value="E" class="road_h2" /><!--E3-->
        <input id="e3_as_target" name="e3_as_target" type="checkbox"><br />
        
        <input id="c1_pressed" onclick="checkMark('c1');" type="button" value="C" class="road_h1" /><!--C1-->
        <input id="c1_as_target" name="c1_as_target" type="checkbox">
        <input id="f1_pressed" onclick="checkMark('f1');" type="button" value="F" class="road_h2" /><!--F1-->
        <input id="f1_as_target" name="f1_as_target" type="checkbox">
        <input id="c2_pressed" onclick="checkMark('c2');" type="button" value="C" class="road_h1_2" /><!--C2-->
        <input id="c2_as_target" name="c2_as_target" type="checkbox">
        <input id="f2_pressed" onclick="checkMark('f2');" type="button" value="F" class="road_h2" /><!--F2-->
        <input id="f2_as_target" name="f2_as_target" type="checkbox">
        <input id="c3_pressed" onclick="checkMark('c3');" type="button" value="C" class="road_h1_2" /><!--C3-->
        <input id="c3_as_target" name="c3_as_target" type="checkbox">
        <input id="f3_pressed" onclick="checkMark('f3');" type="button" value="F" class="road_h2" /><!--F3-->
        <input id="f3_as_target" name="f3_as_target" type="checkbox"><br />
    
        <div id="group1" style="display: none;"> <!--用隐藏域指代路名按钮的选中与否-->
            a<input id="mark_a1" name="mark_a1" type="checkbox" value="A">
            b<input id="mark_b1" name="mark_b1" type="checkbox" value="B">
            c<input id="mark_c1" name="mark_c1" type="checkbox" value="C">
            d<input id="mark_d1" name="mark_d1" type="checkbox" value="D">
            e<input id="mark_e1" name="mark_e1" type="checkbox" value="E">
            f<input id="mark_f1" name="mark_f1" type="checkbox" value="F">
            g<input id="mark_g1" name="mark_g1" type="checkbox" value="G">
            h<input id="mark_h1" name="mark_h1" type="checkbox" value="H">
            |&nbsp;&nbsp;
            a<input id="mark_a2" name="mark_a2" type="checkbox" value="A">
            b<input id="mark_b2" name="mark_b2" type="checkbox" value="B">
            c<input id="mark_c2" name="mark_c2" type="checkbox" value="C">
            d<input id="mark_d2" name="mark_d2" type="checkbox" value="D">
            e<input id="mark_e2" name="mark_e2" type="checkbox" value="E">
            f<input id="mark_f2" name="mark_f2" type="checkbox" value="F">
            g<input id="mark_g2" name="mark_g2" type="checkbox" value="G">
            h<input id="mark_h2" name="mark_h2" type="checkbox" value="H">
            |&nbsp;&nbsp;
            a<input id="mark_a3" name="mark_a3" type="checkbox" value="A">
            b<input id="mark_b3" name="mark_b3" type="checkbox" value="B">
            c<input id="mark_c3" name="mark_c3" type="checkbox" value="C">
            d<input id="mark_d3" name="mark_d3" type="checkbox" value="D">
            e<input id="mark_e3" name="mark_e3" type="checkbox" value="E">
            f<input id="mark_f3" name="mark_f3" type="checkbox" value="F">
            g<input id="mark_g3" name="mark_g3" type="checkbox" value="G">
            h<input id="mark_h3" name="mark_h3" type="checkbox" value="H">
        </div>
    </div>
</div></div>   

<!--初始路牌显示个数-->
<div class="control-group form-row"><div>
    <div class="control-label"><label>初始路牌数:<br />(数量阈值)</label></div>
    <div class="controls">
        <select id="pre_board_num" name="pre_board_num">
            <option value="2">2</option>    
            <option value="3" selected="selected">3</option>
        </select>
        <span class="prompt-text"> (试验开始后路牌初始显示个数)</span>
    </div>
</div></div> 

<!--路牌中心距-->
<div class="control-group form-row"><div>
    <div class="control-label"><label>路牌中心距:<br />(路牌中心与注视点的距离)</label></div>
    <div class="controls">
        <input name="eccent" class="vTextField" id="eccent" type="text" value="" placeholder="d1,d2,d3" >
        <span class="prompt-text">(最多设置3个值, 各值间以 , 分隔)</span>
    </div>
</div></div>

<!--初始角度-->
<div class="control-group form-row"><div>
    <div class="control-label"><label>初始角度(角度值):</label></div>
    <div class="controls">
        <input name="init_angle" class="vTextField" id="init_angle" type="text" value="" placeholder="a1,a2,a3" >
        <span class="prompt-text">(最多设置3个值, 各值间以 , 分隔)</span>
    </div>
</div></div> 

<!--描述信息-->
<div class="control-group form-row"><div>
    <div class="control-label"><label>描述:</label></div>
    <div class="controls">
        <input name="desc" class="vTextField" id="desc" type="text" value="" placeholder="描述信息" >
    </div>
</div></div> 


<br />
<input onclick="saveMultiParams();" value="保存参数" class="btn btn-success" name="save_params" type="button" />    
&nbsp;&nbsp;<span id="set_result"></span>

</form>
</div>

{% endblock %}
